<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Resize Utility: Custom resizing for the Rich Text Editor</title>
    

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="../../build/editor/assets/skins/sam/simpleeditor.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/resize/resize-min.js"></script>
<script type="text/javascript" src="../../build/editor/simpleeditor-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>

<!--there is no custom header content for this example-->


<script type="text/javascript">
//enable passthrough of errors from YUI Event:
if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {
	YAHOO.util.Event.throwErrors = true;
}
</script>
</head>
<body id="yahoo-com" class="yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p><em><a href="http://developer.yahoo.com/yui/">YUI Library Home</a></em></p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
		<input name="vs" type="hidden" value="developer.yahoo.com">
		<input name="vs" type="hidden" value="yuiblog.com">
		<div id="sitesearch">
			<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			<input type="text" id="searchinput" name="p">
			<input type="submit" value="Search" id="searchsubmit" class="ygbt">
		</div>
		</form>	</div>
	<div id="ygma"><a href="../../"><img src="../../assets/yui.gif"  border="0" height="38"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Resize Utility: Custom resizing for the Rich Text Editor</h1></div>
</div>
<div id="bd">
	
	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example">

    
	<div class="promo">
	<h1>Resize Utility: Custom resizing for the Rich Text Editor</h1>
	
	<div class="exampleIntro">
	<p>This example shows how to customize the Resize Utility for things like the <a href="http://developer.yahoo.com/yui/editor/">Rich Text Editor Control</a>.</p>
			
	</div>	
					
	<div class="example-container module ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam"><!--<span id="newWindowLinkx"><span class="first-child">--><a href="rte_resize_clean.html" target="_blank">View example in new window.</a><!--</span></span>-->		
		</div>		<div id="example-canvas" class="bd">
	
		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<style>
#editor_container .yui-resize-handle-br {
    height: 11px;
    width: 11px;
    background-position: -20px -60px;
    background-color: transparent;
}
</style>

<textarea id="editor">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh,
pharetra at, adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum metus.
Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer est quis lacus.
</textarea>


<script>

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        editor = null,
        resize = null;

    Event.onDOMReady(function() {
        editor = new YAHOO.widget.SimpleEditor('editor', {
            height: '300px',
            width: '522px',
            dompath: true,
            animate: true
        });
        editor.on('editorContentLoaded', function() {
            resize = new YAHOO.util.Resize(editor.get('element_cont').get('element'), {
                handles: ['br'],
                autoRatio: true,
                status: true,
                proxy: true,
                setSize: false //This is where the magic happens
            });
            resize.on('startResize', function() {
                this.hide();
                this.set('disabled', true);
            }, editor, true);
            resize.on('resize', function(args) {
                var h = args.height;
                var th = (this.toolbar.get('element').clientHeight + 2); //It has a 1px border..
                var dh = (this.dompath.clientHeight + 1); //It has a 1px top border..
                var newH = (h - th - dh);
                this.set('width', args.width + 'px');
                this.set('height', newH + 'px');
                this.set('disabled', false);
                this.show();
            }, editor, true);
        });
        editor.render();
    });

})();


</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
		
	
	</div>			
	</div>
		
	<h2 class="first">Setting up the Editors HTML</h2>

<p>Setting up the Editor's HTML is done by creating a <code>textarea</code> control on the page.</p>

<textarea name="code" class="HTML">
&lt;form method="post" action="#" id="form1"&gt;
&lt;textarea id="editor" name="editor" rows="20" cols="75"&gt;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh,
pharetra at, adipiscing ullamcorper, rutrum ac, enim. Nullam pretium interdum metus.
Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer est quis lacus.
&lt;/textarea&gt;
&lt;/form&gt;
</textarea>

<h2>Setting up the Editors Javascript</h2>
<p>Once the <code>textarea</code> is on the page, then initialize the Editor like this:</p>

<textarea name="code" class="JScript">
(function() {
    //Setup some private variables
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;

    Event.onDOMReady(function() {
        editor = new YAHOO.widget.SimpleEditor('editor', {
            height: '300px',
            width: '522px',
            dompath: true,
            animate: true
        });
        editor.render();
    });

})();
</textarea>

<h2>Setting up the Resize Utility</h2>

<p>Now we listen for the <code>editorContentLoaded</code> event and setup our Resize instance.</p>

<textarea name="code" class="JScript">
editor.on('editorContentLoaded', function() {
    resize = new YAHOO.util.Resize(editor.get('element_cont').get('element'), {
        handles: ['br'],
        autoRatio: true,
        status: true,
        proxy: true
    });
});
</textarea>

<h2>Making the Resize Utility do what we want</h2>

<p>Now we have a resizable Editor instance, but it doesn't resize the way we want. It only resizes the outer element. But we want the Editor to resize the content area as well.</p>
<p>This is where the config option <code>setSize</code> comes in. When you set the <code>setSize</code> option to false (only when using the proxy config), 
the Resize Utility will not resize the element. It will return the data needed to resize it in the <code>resize</code> Event.</p>

<p>So now we listen for the <code>startResize</code> Event to set the <code>disabled</code> option on the Editor instance.</p>
<p>Then we listen for the <code>resize</code> Event to get the new height and width. Once we have that we can do a little math and tell the Editor instance to resize itself.</p>

<textarea name="code" class="JScript">
resize = new YAHOO.util.Resize(editor.get('element_cont').get('element'), {
    handles: ['br'],
    autoRatio: true,
    status: true,
    proxy: true,
    setSize: false //This is where the magic happens
});
resize.on('startResize', function() {
    this.hide();
    this.set('disabled', true);
}, editor, true);
resize.on('resize', function(args) {
    var h = args.height;
    var th = (this.toolbar.get('element').clientHeight + 2); //It has a 1px border..
    var dh = (this.dompath.clientHeight + 1); //It has a 1px top border..
    var newH = (h - th - dh);
    this.set('width', args.width + 'px');
    this.set('height', newH + 'px');
    this.set('disabled', false);
    this.show();
}, editor, true);
</textarea>

<h2>Styling the resize handle</h2>
<p>Next we will override the default Resize CSS and make the handle a little bigger.</p>
<textarea name="code" class="CSS">
/* The ID of the editor's container and the bottom right resize handle. */
#editor_container .yui-resize-handle-br {
    /* Make the handle a little bigger than the default */
    height: 11px;
    width: 11px;
    /* Resposition the image */
    background-position: -20px -60px;
    /* Kill the hover on the handle */
    background-color: transparent;
}
</textarea>


<h2>Full Example Source</h2>
<textarea name="code" class="JScript">
(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        editor = null,
        resize = null;

    Event.onDOMReady(function() {
        editor = new YAHOO.widget.SimpleEditor('editor', {
            height: '300px',
            width: '522px',
            dompath: true,
            animate: true
        });
        editor.on('editorContentLoaded', function() {
            resize = new YAHOO.util.Resize(editor.get('element_cont').get('element'), {
                handles: ['br'],
                autoRatio: true,
                status: true,
                proxy: true,
                setSize: false //This is where the magic happens
            });
            resize.on('startResize', function() {
                this.hide();
                this.set('disabled', true);
            }, editor, true);
            resize.on('resize', function(args) {
                var h = args.height;
                var th = (this.toolbar.get('element').clientHeight + 2); //It has a 1px border..
                var dh = (this.dompath.clientHeight + 1); //It has a 1px top border..
                var newH = (h - th - dh);
                this.set('width', args.width + 'px');
                this.set('height', newH + 'px');
                this.set('disabled', false);
                this.show();
            }, editor, true);
        });
        editor.render();
    });

})();
</textarea>


<h2>Configuration for This Example</h2>

<p>You can load the necessary JavaScript and CSS for this example from Yahoo's servers.  <a href="http://developer.yahoo.com/yui/articles/hosting/?event&dom&animation&element&resize&simpleeditor&MIN#configure">Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured</a>.</p>

				</div>
				<div class="yui-u">
					
				
					<div id="examples">
						<h3 class='firstContent'>Resize Utility Examples:</h3>
	
						<div id="exampleToc">
							<ul>
								<li><a href='../resize/simple_resize.html'>Simple Resize</a></li><li><a href='../resize/proxy_resize.html'>Proxy Resize</a></li><li><a href='../resize/anim_resize.html'>Animated Proxy Resize</a></li><li><a href='../resize/eightway_resize.html'>8-way Element Resize</a></li><li><a href='../resize/ghost_resize.html'>Ghosting and Custom Proxy Resize</a></li><li class='selected'><a href='../resize/rte_resize.html'>Custom resizing for the Rich Text Editor</a></li><li><a href='../resize/grids_resize.html'>Split Pane resizing with Grids CSS</a></li><li><a href='../resize/skinning_resize.html'>Skinning the Resize Utility</a></li><li><a href='../layout/panel_layout.html'>Layout inside a resizable Panel (included with examples for Layout Manager)</a></li><li><a href='../container/panel-resize.html'>Creating a Resizable Panel (included with examples for Container Family)</a></li><li><a href='../layout/adv_layout.html'>Complex Application (included with examples for Layout Manager)</a></li>							</ul>
						</div>
					</div>
					
					<div id="module">
						<h3>More Resize Utility Resources:</h3>
						<ul>
							<li><a href="http://developer.yahoo.com/yui/resize/">User's Guide</a> (external)</li>
						<li><a href="../../docs/module_resize.html">API Documentation</a></li>
                            
                            
							<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/resize.pdf">Cheat Sheet PDF</a> (external)</li></ul>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="YUILibrary.com hosts the YUI community forums" href="http://yuilibrary.com/forum/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library source can be checked out from GitHub" href="http://github.com/yui/">YUI on GitHub</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Carousel Control - Functional Examples" href="../../examples/carousel/index.html">Carousel</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Paginator - Functional Examples" href="../../examples/paginator/index.html">Paginator</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer</a></li><li class="item"><a title="The YUI ProgressBar Control - Functional Examples" href="../../examples/progressbar/index.html">ProgressBar</a></li><li class="selected "><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI Storage Utility - Functional Examples" href="../../examples/storage/index.html">Storage</a></li><li class="item"><a title="The YUI SWF Utility - Functional Examples" href="../../examples/swf/index.html">SWF</a></li><li class="item"><a title="The YUI SWFStore Utility - Functional Examples" href="../../examples/swfstore/index.html">SWFStore</a></li><li class="item"><a title="The YUI Stylesheet Utility - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2010 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

<script src='../../assets/YUIexamples.js'></script>


</body>
</html>
